<template>
  <el-dialog title="设置不配送地区" v-model="panelAreaDialogShow" width="600" :before-close="handleClose"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="myBody">
     <CascaderPanel ref="cascaderPanelRef" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { usePanelAreaDialog } from '../Hooks/freightAction';
import CascaderPanel from './CascaderPanel.vue'

const { panelAreaDialogShow, panelArea,panelAreaNameList } = usePanelAreaDialog()

const cascaderPanelRef = ref(null)
const handleClose = () => {
  panelAreaDialogShow.value = false
}
const confirm = () => { 
  panelArea.value = cascaderPanelRef.value.getCheckedThreeData()
  panelAreaNameList.value = cascaderPanelRef.value.getCheckedName()
  handleClose()
}
</script>

<style lang="less" scoped>
.myBody {
  height: 330px;

  :deep(.el-cascader-panel) {
    height: 100%;

    .el-cascader-menu {
      height: 100% !important;
    }

    .el-cascader-menu__wrap {
      height: 100% !important;
    }
  }
}</style>